<template>
	<view @touchmove.stop.prevent="zcTouchmove">
		<!-- 自定义 选择弹出层  ( 底部弹出 )  -->
		<view v-if="cpIsBottomBox" class="Custom_picker" :style="{'height':isShow?'100%':''}">
			<view class="Custom_picker_mask"></view>
			<view class="Custom_picker_content" :style="{'bottom':isShow?'0':''}">
				<view class="uni-padding-wrap uni-flex zcAlignC_center zcJustifyC_between">
					<view class="cancel" @tap="cpConfirm('cancel')">取消</view>
					<!-- <view class="uni-title uni-flex-item uni-flex"> -->
						<!-- 日期：{{item1[0]?item1[0]:''}}年{{item2[0]?item2[0]:''}}月{{item3[0]?item3[0]:''}}日 -->
					<!-- 	<view class="">{{cpvalue1}}</view>
						<view v-if="cpnumber >= 2" class="">{{cpvalue2}}</view>
						<view v-if="cpnumber >= 3" class="">{{cpvalue3}}</view>
						<view v-if="cpnumber >= 4" class="">{{cpvalue4}}</view>
					</view> -->
					<view class="confirm" @tap="cpConfirm('confirm')">确定</view>
				</view>
				<picker-view v-if="cpitem1.length>0" :indicator-style="indicatorStyle" :value="[cpvalue1,cpvalue2,cpvalue3,cpvalue4]" @change="cpbindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in cpitem1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="cpnumber >= 2">
						<view class="item" v-for="(item,index) in cpitem2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="cpnumber >= 3">
						<view class="item" v-for="(item,index) in cpitem3" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="cpnumber >= 4">
						<view class="item" v-for="(item,index) in cpitem4" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
		
		<!-- 自定义 选择弹出层 (右侧弹出)-->
		<view class="Custom_left_picker" :style="{'width':isShowBox?'100%':'0'}" >
			<view class="Custom_left_picker_mask" @tap="doBReturn(0)"></view>
			<view class="Custom_left_picker_content">
<!-- 				<view class="uni-flex zcAlignI_center" style="height: 7%;top: 0;">
					<view v-show="isShowBox" class="input-view zcRelative">
						<uni-icon class='uni-icon' type="search" size="22" color="#3CA4FA" />
						<input confirm-type="search" :value="SearchValue" class="input" type="text" @input="(event)=>zcSearchInput(event,boxId)" :placeholder="'请输入'+(isShowBox4?'年款':isShowBox3?'名称':isShowBox2?'系列':'品牌')+'关键字'" @confirm="confirm" />
					</view>
				</view>
				 -->
				<view>
					<view class="picker_item" :style="{'max-width':isShowBox?'1000px':'0'}">
						<view class="left_item" @tap="doBReturn(0)" style="border-left: 6upx solid #3CA4F9;">
							<view class="iconfont icon-icon_arrow_left"></view>品牌
						</view>
						<scroll-view v-if="cpitem1.length>0" scroll-y class="left_item_model" style="overflow: auto;">
							<view class="left_item_model">
								<view class="left_item" :class="{'active':((pindex1===index)&&isIndexClick)}" v-for="(item,index) in cpitem1" :key="index" @tap="clickValue(0,index)" >{{item.name}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="cpitem2.length>0" :style="{'width':(isShowBox2)?'60%':'0'}">
					<view class="picker_item1" :style="{'max-width':(isShowBox2 || (boxId>=1))?'1000px':'0'}">
						<view class="left_item" @tap="doBReturn(1)" style="border-left: 6upx solid #3CA4F9;" >
							<view class="iconfont icon-icon_arrow_left"></view>系列
						</view>
						<scroll-view scroll-y="true" class="left_item_model" style="overflow: auto;" >
							<view class="left_item_model" >
								<view class="left_item" :class="{'active':((pindex2===index)&&isIndexClick)}" v-for="(item,index) in cpitem2" :key="index" @tap="clickValue(1,index)">{{item.name}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="cpitem3.length>0" :style="{'width':(isShowBox3)?'40%':'0'}">
					<view class="picker_item2" :style="{'max-width':(isShowBox3 || (boxId>=2))?'1000px':'0'}">
						<view class="left_item" @tap="doBReturn(2)" style="border-left: 6upx solid #3CA4F9;" >
							<view class="iconfont icon-icon_arrow_left"></view>名称
						</view>
						<scroll-view scroll-y="true" class="left_item_model" style="overflow: auto;"  >
							<view class="left_item_model" >
								<view class="left_item" :class="{'active':((pindex3===index)&&isIndexClick)}" v-for="(item,index) in cpitem3" :key="index" @tap="clickValue(2,index)">{{item.name}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="cpitem4.length>0" :style="{'width':(isShowBox4)?'20%':'0'}">
					<view class="picker_item3" :style="{'max-width':(isShowBox4 || (boxId>=3))?'1000px':'0'}" >
						<view class="left_item" @tap="doBReturn(3)" style="border-left: 6upx solid #3CA4F9;" >
							<view class="iconfont icon-icon_arrow_left"></view>年款
						</view>
						<scroll-view scroll-y="true" class="left_item_model" style="overflow: auto;" >
							<view class="left_item_model">
								<view class="left_item" :class="{'active':((pindex4===index)&&isIndexClick)}" v-for="(item,index) in cpitem4" :key="index" @tap="clickValue(3,index)">{{item.Year}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 自定义 选择弹出层 (底部弹出，地区简称)-->
		<view class="Custom_left_picker1" :class="{'picker_show':isPickerShowBox}" >
			<view class="Custom_left_picker_mask1" :class="{'picker_mask_show':isPickerShowBox}" @tap="doBReturn1()"></view>
			<view class="Custom_left_picker_content1" :class="{'picker_content_show':isPickerShowBox}" >
				<view class="uni-flex zcFlex_column picker_model1">
					<view class="uni-padding-wrap1 uni-flex zcAlignC_center zcJustifyC_between uni-flex-item">
						<view class="cancel1" @tap="cpConfirm1('cancel')">取消</view>
						<view class="confirm1" @tap="cpConfirm1('confirm')">确定</view>
					</view>
					<view class="picker_content1 uni-flex">
						<block v-for="(item,index) in pickers" :key="index" >
							<view class="picker_itemc" @tap="clickItem(index)" :class="{'active1':(pickerValue === index)}">{{item}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 自定义 选择弹出层 (底部弹出，日期范围 )-->
		<view class="Custom_left_picker1" :class="{'picker_show':isDateShow}" >
			<view class="Custom_left_picker_mask1" :class="{'picker_mask_show':isDateShow}" @tap="cpDateConfirm('cancel')"></view>
			<view class="Custom_left_picker_content1" :class="{'picker_content_show':isDateShow}" >
				<view class="uni-flex zcFlex_column picker_model1">
					<view class="uni-padding-wrap1 uni-flex zcAlignC_center zcJustifyC_between uni-flex-item">
						<view class="cancel1" @tap="cpDateConfirm('cancel')">取消</view>
						<view class="confirm1" @tap="cpDateConfirm('confirm')">确定</view>
					</view>
					<view class="picker_date_content uni-flex">
						<picker-view  :indicator-style="indicatorStyle" :value="dateValue" @change="zcDateBindChange">
							<picker-view-column>
								<view class="item" v-if="years.length>0" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-if="months.length>0" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-if="days.length>0" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
							
							<picker-view-column style="width: 40upx;flex: 0 0 auto;">
								<view class="item" style="width: 40upx;" :key="0">~</view>
							</picker-view-column>
							
							<picker-view-column>
								<view class="item" v-if="years.length>0" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-if="months.length>0" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-if="days1.length>0" v-for="(item,index) in days1" :key="index">{{item}}日</view>
							</picker-view-column>
							
						</picker-view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniIcon from "../uni-icon/uni-icon.vue"
	
	export default {
		components:{
			uniIcon
		},
		props:{
			isShow:{
				type:Boolean,
				default:false
			},
			cpIsBottomBox:{
				type:Boolean,
				default:true
			},
			cpnumber:{
				type:Number,
				default:3
			},
			cpvalue1:{
				type:Number,
				default:0
			},
			cpvalue2:{
				type:Number,
				default:0
			},
			cpvalue3:{
				type:Number,
				default:0
			},
			cpvalue4:{
				type:Number,
				default:0
			},
			isShowBox:{	// 一级选择框是否显示
				type:Boolean,
				default:false
			},
			boxId:Number,
			cpitem1:Array,	//	[{name:'A',SN:'B'}]
			cpitem2:Array,
			cpitem3:Array,
			cpitem4:Array,
			isShowBox1:{
				type:Boolean,
				default:false
			},
			// 四
			isDateShow:{
				type:Boolean,
				default:false
			},
		},
		data() {
			
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const days1 = []
			const date1 = new Date(year,month,0)
			const day = date.getDate()
			for (let i = 1990; i <= 2200; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= date1.getDate(); i++) {
				days.push(i)
				days1.push(i)
			}
			return {
				value:[0,0,0,0],
				//  自定义弹出层 数据
				pindex1:0,	// 一级选择框中选中数据下标( 子组件内部属性，触发事件会 )
				pindex2:0,	// 二级选择框中选中数据下标( 子组件内部属性，触发事件会 )
				pindex3:0,	// 三级选择框中选中数据下标( 子组件内部属性，触发事件会 )
				pindex4:0,	// 四级级选择框中选中数据下标( 子组件内部属性，触发事件会 )
				isIndexClick:false,		// 弹出层是否点击过
				isShowBox2:false,	// 二级选择框是否显示
				isShowBox3:false,	// 三级选择框是否显示
				isShowBox4:false,	// 四级级选择框是否显示
				SearchValue:null,	//	车型搜索内容
				pickerValue:0,	// 弹出层最终数据 ( 子组件内部属性，触发事件会 )
				isPickerShowBox:false,
				pickers:['川','京','沪','冀','豫','云','辽','黑','湘','皖','鲁','新','苏','浙','闽','赣','鄂','桂','甘','晋','蒙','陕','吉','贵','粤','青','藏','津','宁','琼','渝','港','澳','台'],
				//  四
				// isDateShow:true,
				years,
				year,
				months,
				month,
				days,
				days1,
				day,
				dateValue: [years.indexOf(year), month - 1, day - 1, 0, years.indexOf(year), month - 1, day - 1],
				//  自定义弹出层 数据 ( END )
			};
		},
		watch:{
			isShowBox1(newVal,oldVal) {
				this.isPickerShowBox = newVal;
			}
		},
		methods:{
			zcTouchmove() {
				return;
			},
			//  自定义弹出层  事件
			cpbindChange(res) {
				// console.log('自定义 选择框回调 = ',res);
				if (res.detail.value[0] !== 0) {
					
				}
				this.$emit('cpbindChange',res.detail.value);
			},
			cpConfirm(type) {
				this.$emit('cpConfirm',type);
			},
			cpConfirm1(type) {
				this.isPickerShowBox = !this.isPickerShowBox;
				if (type === 'confirm') {
					this.$emit('cpConfirm',this.pickers[this.pickerValue]);
				}else if (type === 'cancel') {
					this.$emit('cpCancel');
				}
			},
			clickItem(index) {
				this.pickerValue = index;
			},
			//  初始化  车牌地区简称  弹出层
			doBReturn1() {
				this.$emit('cpCancel');
			},
			// 自定义弹出层 （ 右侧 ）事件
			doBReturn(res) {
				console.log('车型 = ',res);
				this.SearchValue = '';
				setTimeout(()=>{this.SearchValue = null;},100)
				if (res === 1) {
					this.isShowBox2 = false;
				}else if (res === 2) {
					this.isShowBox3 = false;
					let isShowBox = false;
					this.isIndexClick = false;
					this.pindex1 = 0;
					this.pindex2 = 0;
					this.$emit('zcItemClick',{isShowBox:isShowBox});
				}else if (res === 3) {
					this.isShowBox4 = false;
				}else{

					this.pindex3 = 0;
					this.pindex4 = 0;
					
				}
			},
			clickValue(id,index) {
				this.value[id] = index;
				this.isIndexClick = true;
				this.SearchValue = '';
				setTimeout(()=>{this.SearchValue = null;},100)
				if (id === 0) {
					this.value[1] = 0;
					this.value[2] = 0;
					this.value[3] = 0;
					this.pindex1 = index;
					this.pindex2 = 0;
					this.pindex3 = 0;
					this.pindex4 = 0;
					this.isShowBox2 = true;
				}else if (id === 1) {
					this.value[2] = 0;
					this.value[3] = 0;
					this.pindex2 = index;
					this.pindex3 = 0;
					this.pindex4 = 0;
					this.isShowBox3 = true;
					this.isIndexClick = false;
					this.$emit('zcClickValue',this.value);
					return;
				}else if (id === 2) {
					this.value[3] = 0;
					this.pindex3 = index;
					this.pindex4 = 0;
					this.isShowBox4 = true;
				}else{
					//  处理 最终选择的值传给父组件
					this.pindex4 = index;
					this.isShowBox2 = false;
					this.isShowBox3 = false;
					this.isShowBox4 = false;
					this.isIndexClick = false;
					this.$emit('zcClickValue',this.value);
					return;
				}
				console.log('选中数据 = ',this.value);
				this.$emit('zcItemClick',{
					boxId:id+1,
					value:this.value
				});
			},
			// 右侧弹出层 车型数据过滤
			zcSearchInput(res,index) {
				this.$emit('zcSearchInput',{
					res:res.detail.value,
					index:index
				});
			},
			// 自定义弹出层 （ END ）
			//
			cpDateConfirm(type) {
				let obj = {
					value:'',
					is: this.isDateShow
				}
				if (type === 'confirm') {
					obj.value = this.years[this.dateValue[0]]+'-'+this.months[this.dateValue[1]]+'-'+this.days[this.dateValue[2]]+'~'+this.years[this.dateValue[4]]+'-'+this.months[this.dateValue[5]]+'-'+this.days1[this.dateValue[6]];
					this.$emit('cpConfirm',obj);
				}else if (type === 'cancel') {
					this.$emit('cpCancel',obj);
				}
			},
			zcDateBindChange(res) {
				let list = res.detail.value;
				this.dateValue = res.detail.value;
				if ((list[0] !== this.dateValue[0]) || (list[1] !== this.dateValue[1])) {
					this.days = this.dayInit(list[0],list[1]);
				}else if ((list[4] !== this.dateValue[4]) || (list[5] !== this.dateValue[5])) {
					this.days1 = this.dayInit(list[4],list[5]);
				}
				
			},
			dayInit(res,res1) {
				let days = [];
				let date = new Date(this.years[res],this.months[res1],0);
				for (let i = 0; i <= date.getDate(); i++) {
					days.push(i);
				}
				return days;
			}
			
		}
	}
</script>

<style>
	/*  自定义 弹出层样式 */
	.Custom_picker{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;}
	.Custom_picker_mask{width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);}
	.Custom_picker_content{height: 50%;position: absolute;left: 0;width: 100%;bottom: -600px;background-color: #FFFFFF;transition: bottom .5s; }
	picker-view{height: 85%;}
	picker-view .item{text-align: center;line-height: 2.5;}
	.cancel,.confirm{font-size: 30upx;line-height: 1.5;margin: 0 10upx;padding: 20upx 10upx;font-weight: 500;}
	.confirm{color: #3CA4F9;}
	.uni-padding-wrap{border-bottom: 4upx solid #E5E5E5;}
	
	/* --------------------- */
	.Custom_left_picker{position: fixed;bottom: 0;left: 0;width: 0;top: 0;z-index: 10;height: 100%;}
	.Custom_left_picker_mask{width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);}
	.Custom_left_picker_content,.Custom_left_picker_content>view{height: 100%;position: absolute;right: 0;width: 100%;bottom: 0;z-index: 10;}
	.Custom_left_picker_content>view{height: 100%;}
	.Custom_left_picker_content>view:first-child{width: 100%;}
	.picker_item{height: 100%;position: absolute;right: 0;width: 80%;bottom: 0;background-color: #FFFFFF;z-index: 10;box-shadow: 1upx 1upx 10upx 5upx #E5E5E5;max-width: 0;transition: max-width .5s;overflow: hidden;}
	.picker_item1{height: 100%;position: absolute;right: 0;width: 100%;bottom: 0;background-color: #FFFFFF;z-index: 10;box-shadow: 1upx 1upx 10upx 5upx #E5E5E5;max-width: 0;transition: max-width .5s;overflow: hidden;}
	.picker_item2{height: 100%;position: absolute;right: 0;width: 100%;bottom: 0;background-color: #FFFFFF;z-index: 10;box-shadow: 1upx 1upx 10upx 5upx #E5E5E5;max-width: 0;transition: max-width .5s;overflow: hidden;}
	.picker_item3{height: 100%;position: absolute;right: 0;width: 100%;bottom: 0;background-color: #FFFFFF;z-index: 10;box-shadow: 1upx 1upx 10upx 5upx #E5E5E5;max-width: 0;transition: max-width .5s;overflow: hidden;}
	
	.left_item_model{height: 100%;box-sizing: border-box;padding-bottom: 250upx !important}
	.left_item{display: flex;flex-flow: row;align-items: center;border-bottom: 4upx solid #E5E5E5;margin-right: 10upx;padding: 20upx;}
	.active{background-color: #3CA4F9;color: #FFFFFF;}
	.icon-icon_arrow_left:before{
		content: '\e614' !important;
		margin-right: 10upx;
	}
	
	/* 三 */
	.Custom_left_picker1{position: fixed;bottom: 0;left: 0;width: 100%;top: 0;z-index: 10;height: 0;overflow: hidden;}
	.Custom_left_picker_mask1{width: 100%;height: 100%;background-color: #000000;opacity: 0;transition: opacity .5s;}
	.picker_show{height: 100%;}
	.picker_mask_show{opacity: 0.4;}
	.picker_content_show{max-height: 1000px!important;}
	.Custom_left_picker_content1{height: 40%;position: absolute;right: 0;width: 100%;bottom: 0;z-index: 10;background-color: #FFFFFF;max-height: 0;transition: max-height .5s;}
	.picker_itemc{padding: 0 6upx;box-sizing: border-box;flex: 0 0 14%;justify-content: center;align-items: center;display: flex;border: 1upx solid #FFFFFF;}
	.picker_model1{width: 100%;height: 100%;}
	.cancel1,.confirm1{font-size: 30upx;line-height: 1.5;margin: 0 10upx;padding: 0upx 10upx;font-weight: 500;}
	.confirm1{color: #3CA4F9;}
	.uni-padding-wrap1{width: 100%;height: 16%;box-sizing: border-box;border-bottom: 2upx solid #E5E5E5;display: flex;align-items: center;}
	.picker_content1{width: 100%;height: 84%;flex-wrap: wrap;padding: 40upx;box-sizing: border-box;}
	.picker_content1 .active1{border-color: #3CA4F9;color: #3CA4F9;}
	
	/* 四 */
	.picker_date_content{width: 100%;height: 84%;flex-wrap: wrap;box-sizing: border-box;}
	.picker_date_content picker-view{height: 100%;width: 100%;}
	/*  自定义 弹出层(END)  */
	
	
	/* 搜索栏样式 */
	.input-view {
		/* width: 92%; */
		display: flex;
		background-color: #FFFFFF;
		/* height: 72upx; */
		border-radius: 10upx;
		/* overflow: hidden; */
		/* padding: 0 4%; */
		flex-wrap: nowrap;
		/* line-height: 72upx;
		flex: 1; */
		padding-right: 16upx;
		width: 75%;
		position: absolute;
		right: 1%;
	}
	
	.input-view .uni-icon {
		line-height: 1 !important;
		padding: 0 10upx;
		display: flex;
		align-items: center;
	}
	
	.input-view .input {
		height: 72upx;
		line-height: 72upx;
		padding: 0 3%;
		margin-right: 30upx;
		flex: 1;
	}
</style>
